

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Contributing &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/master/en/html/CONTRIBUTING.html" />

  
  <!--[if lt IE 9]>
    <script src="_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
        <script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
        <script src="_static/jquery.js"></script>
        <script src="_static/underscore.js"></script>
        <script src="_static/doctools.js"></script>
    
    <script type="text/javascript" src="_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Changelog" href="CHANGELOG.html" />
    <link rel="prev" title="Grid navigation" href="others/gridnav.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="index.html">
          

          
            
            <img src="_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.1
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#lvgl-doesn-t-start-randomly-crashes-or-nothing-is-drawn-on-the-display-what-can-be-the-problem">LVGL doesn't start, randomly crashes or nothing is drawn on the display. What can be the problem?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#my-display-driver-is-not-called-what-have-i-missed">My display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#why-do-i-see-nonsense-colors-on-the-screen">Why do I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="examples.html">Examples</a><ul>
<li class="toctree-l2"><a class="reference internal" href="examples.html#get-started">Get started</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#styles">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#size-styles">Size styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#background-styles">Background styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#border-styles">Border styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#outline-styles">Outline styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#image-styles">Image styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#text-styles">Text styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#line-styles">Line styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#transition">Transition</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#extending-the-current-theme">Extending the current theme</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#animations">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#playback-animation">Playback animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#events">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#button-click-event">Button click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#event-bubbling">Event bubbling</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#layouts">Layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#flex">Flex</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#grid">Grid</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#scrolling">Scrolling</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#snapping">Snapping</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#floating-button">Floating button</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="examples.html#widgets">Widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="examples.html#base-object">Base object</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-arc">Simple Arc</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#loader-with-arc">Loader with Arc</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#bar">Bar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-bar">Simple Bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#styling-a-bar">Styling a bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#temperature-meter">Temperature meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#stripe-pattern-and-range-value">Stripe pattern and range value</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#bar-with-ltr-and-rtl-base-direction">Bar with LTR and RTL base direction</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#custom-drawer-to-show-the-current-value">Custom drawer to show the current value</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#button">Button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-buttons">Simple Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#styling-buttons">Styling buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#gummy-button">Gummy button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#button-matrix">Button matrix</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-button-matrix">Simple Button matrix</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#custom-buttons">Custom buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#pagination">Pagination</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#calendar">Calendar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#calendar-with-header">Calendar with header</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#canvas">Canvas</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#drawing-on-the-canvas-and-rotate">Drawing on the Canvas and rotate</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#transparent-canvas-with-chroma-keying">Transparent Canvas with chroma keying</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#chart">Chart</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#line-chart">Line Chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#faded-area-line-chart-with-custom-division-lines">Faded area line chart with custom division lines</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#axis-ticks-and-labels-with-scrolling">Axis ticks and labels with scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#show-the-value-of-the-pressed-points">Show the value of the pressed points</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#display-1000-data-points-with-zooming-and-scrolling">Display 1000 data points with zooming and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#show-cursor-on-the-clicked-point">Show cursor on the clicked point</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#scatter-chart">Scatter chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#stacked-area-chart">Stacked area chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#checkbox">Checkbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-checkboxes">Simple Checkboxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#checkboxes-as-radio-buttons">Checkboxes as radio buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#colorwheel">Colorwheel</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-colorwheel">Simple Colorwheel</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#dropdown">Dropdown</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-drop-down-list">Simple Drop down list</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#drop-down-in-four-directions">Drop down in four directions</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#menu">Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#image-from-variable-and-symbol">Image from variable and symbol</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#image-recoloring">Image recoloring</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#rotate-and-zoom">Rotate and zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#image-offset-and-styling">Image offset and styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#image-button">Image button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-image-button">Simple Image button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#keyboard">Keyboard</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#keyboard-with-text-area">Keyboard with text area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#label">Label</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#line-wrap-recoloring-and-scrolling">Line wrap, recoloring and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#text-shadow">Text shadow</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#show-ltr-rtl-and-chinese-texts">Show LTR, RTL and Chinese texts</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#draw-label-with-gradient-color">Draw label with gradient color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#led">LED</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#led-with-custom-style">LED with custom style</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-line">Simple Line</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#list">List</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-list">Simple List</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#sorting-a-list-using-up-and-down-buttons">Sorting a List using up and down buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#id2">Menu</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-menu">Simple Menu</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-menu-with-root-btn">Simple Menu with root btn</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-menu-with-custom-header">Simple Menu with custom header</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-menu-with-floating-btn-to-add-new-menu-page">Simple Menu with floating btn to add new menu page</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#complex-menu">Complex Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#meter">Meter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-meter">Simple meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#a-meter-with-multiple-arcs">A meter with multiple arcs</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#a-clock-from-a-meter">A clock from a meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#pie-chart">Pie chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#message-box">Message box</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-message-box">Simple Message box</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#roller">Roller</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-roller">Simple Roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#styling-the-roller">Styling the roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#add-fade-mask-to-roller">add fade mask to roller</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#slider">Slider</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-slider">Simple Slider</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#slider-with-custom-style">Slider with custom style</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#slider-with-extended-drawer">Slider with extended drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#span">Span</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#span-with-custom-styles">Span with custom styles</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#spinbox">Spinbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-spinbox">Simple Spinbox</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#spinner">Spinner</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-spinner">Simple spinner</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#switch">Switch</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-switch">Simple Switch</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#table">Table</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-table">Simple table</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#lightweighted-list-from-table">Lightweighted list from table</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#tabview">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-tabview">Simple Tabview</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#tabs-on-the-left-styling-and-no-scrolling">Tabs on the left, styling and no scrolling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#textarea">Textarea</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-text-area">Simple Text area</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#text-area-with-password-field">Text area with password field</a></li>
<li class="toctree-l4"><a class="reference internal" href="examples.html#text-auto-formatting">Text auto-formatting</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#id3">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#tileview-with-content">Tileview with content</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="examples.html#window">Window</a><ul>
<li class="toctree-l4"><a class="reference internal" href="examples.html#simple-window">Simple window</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/quick-overview.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="get-started/nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/espressif.html">Espressif (ESP32 chip series)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/espressif.html#lvgl-demo-project-for-esp32">LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/espressif.html#using-lvgl-in-your-esp-idf-project">Using LVGL in your ESP-IDF project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/espressif.html#obtaining-lvgl">Obtaining LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/espressif.html#configuration">Configuration</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/espressif.html#using-lvgl-esp32-drivers-in-esp-idf-project">Using lvgl_esp32_drivers in ESP-IDF project</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#get-the-lvgl-arduino-library">Get the LVGL Arduino library</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#initialize-and-run-lvgl">Initialize and run LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#use-the-examples-and-demos">Use the examples and demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/tasmota-berry.html">Tasmota and berry</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#what-is-tasmota">What is Tasmota?</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#what-is-berry">What is Berry?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/tasmota-berry.html#highlights-of-berry">Highlights of Berry</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#why-lvgl-tasmota-berry">Why LVGL + Tasmota + Berry?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/tasmota-berry.html#tasmota-berry-lvgl-could-be-used-for">Tasmota + Berry + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/tasmota-berry.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#how-can-i-use-it">How can I use it?</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/tasmota-berry.html#where-can-i-find-more-information">Where can I find more information?</a><ul>
<li class="toctree-l4"><a class="reference external" href="https://tasmota.github.io/docs/">Tasmota Documentation</a></li>
<li class="toctree-l4"><a class="reference external" href="https://github.com/berry-lang/berry/wiki/Reference">Berry Documentation</a></li>
<li class="toctree-l4"><a class="reference external" href="https://tasmota.github.io/docs/LVGL/">Tasmota LVGL Berry documentation</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#first-you-need-to-install-the-pre-requisites-on-your-system">First you need to install the pre-requisites on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#now-let-s-create-a-workspace-to-save-our-files">Now let's create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="get-started/nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/rt-thread.html">RT-Thread RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="get-started/rt-thread.html#what-is-rt-thread">What is RT-Thread?</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/rt-thread.html#how-to-run-lvgl-on-rt-thread">How to run LVGL on RT-Thread?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="get-started/cmake.html">CMake</a><ul>
<li class="toctree-l3"><a class="reference external" href="https://docs.espressif.com/projects/esp-idf/en/v3.3/get-started-cmake/index.html">Espressif (ESP32)</a></li>
<li class="toctree-l3"><a class="reference external" href="https://docs.micropython.org/en/v1.15/develop/cmodules.html">MicroPython</a></li>
<li class="toctree-l3"><a class="reference external" href="https://docs.zephyrproject.org/latest/guides/zephyr_cmake_package.html">Zephyr</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/cmake.html#prerequisites">Prerequisites</a><ul>
<li class="toctree-l4"><a class="reference external" href="https://www.gnu.org/software/make/">Make</a></li>
<li class="toctree-l4"><a class="reference external" href="https://ninja-build.org/">Ninja</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/cmake.html#building-lvgl-with-cmake">Building LVGL with CMake</a><ul>
<li class="toctree-l4"><a class="reference internal" href="get-started/cmake.html#additional-cmake-options">Additional CMake options</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="get-started/cmake.html#building-lvgl-examples-with-cmake">Building LVGL examples with CMake</a></li>
<li class="toctree-l3"><a class="reference internal" href="get-started/cmake.html#building-lvgl-drivers-and-demos-with-cmake">Building LVGL drivers and demos with CMake</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="porting/project.html">Set up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/project.html#add-lvgl-to-your-project">Add lvgl to your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/project.html#automatically-add-files">Automatically add files</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/project.html#make-and-cmake">Make and CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/project.html#other-platforms-and-tools">Other platforms and tools</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/project.html#demos-and-examples">Demos and Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#buffering-modes">Buffering modes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#one-buffer">One buffer</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#two-buffers">Two buffers</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#full-refresh">Full refresh</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#direct-mode">Direct mode</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="porting/gpu.html">Add custom GPU</a><ul>
<li class="toctree-l3"><a class="reference internal" href="porting/gpu.html#draw-context">Draw context</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/gpu.html#fields">Fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/gpu.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/gpu.html#software-renderer">Software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/gpu.html#blend-callback">Blend callback</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/gpu.html#extend-the-software-renderer">Extend the software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="porting/gpu.html#new-blend-callback">New blend callback</a></li>
<li class="toctree-l4"><a class="reference internal" href="porting/gpu.html#new-rectangle-drawer">New rectangle drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="porting/gpu.html#fully-custom-draw-engine">Fully custom draw engine</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="overview/index.html">Overview</a><ul>
<li class="toctree-l2"><a class="reference internal" href="overview/object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/object.html#snapshot">Snapshot</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#size-styles">Size styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#background-styles">Background styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#border-styles">Border styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#outline-styles">Outline styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#image-styles">Image styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#arc-styles">Arc styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#text-styles">Text styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#line-styles">Line styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#transition">Transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#id1">Local styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style.html#extending-the-current-theme">Extending the current theme</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-grad">bg_grad</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-dither-mode">bg_dither_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#id1">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#floating-button">Floating button</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/scroll.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#button-click-event">Button click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/event.html#id1">Event bubbling</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/indev.html#pointers">Pointers</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#cursor">Cursor</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#gestures">Gestures</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/font.html#compressed-fonts">Compressed fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#add-a-new-font">Add a new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#load-a-font-at-run-time">Load a font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#add-a-new-font-engine">Add a new font engine</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/font.html#use-font-fallback">Use font fallback</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/file-system.html#adding-a-driver">Adding a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/file-system.html#use-drives-for-images">Use drives for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#timeline">Timeline</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/animation.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/animation.html#playback-animation">Playback animation</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/animation.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="overview/drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="overview/drawing.html#masking">Masking</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/drawing.html#using-masks">Using masks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="overview/drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="overview/drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="overview/drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="overview/new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#display-and-screens">Display and Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/obj.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/animimg.html">Animation Image (lv_animimg)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/animimg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/menu.html">Menu (lv_menu)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/menu.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/flex.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="layouts/grid.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="libs/index.html">3rd party libraries</a><ul>
<li class="toctree-l2"><a class="reference internal" href="libs/fsdrv.html">File System Interfaces</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/fsdrv.html#usage">Usage</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/bmp.html">BMP decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/bmp.html#limitations">Limitations</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/bmp.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/bmp.html#open-a-bmp-image-from-file">Open a BMP image from file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/bmp.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/sjpg.html">JPG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/sjpg.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/sjpg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/sjpg.html#converter">Converter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/sjpg.html#converting-jpg-to-c-array">Converting JPG to C array</a></li>
<li class="toctree-l4"><a class="reference internal" href="libs/sjpg.html#converting-jpg-to-sjpg">Converting JPG to SJPG</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/sjpg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/sjpg.html#load-an-sjpg-image">Load an SJPG image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/sjpg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/png.html">PNG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/png.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/png.html#open-a-png-image-from-file-and-variable">Open a PNG image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/png.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/gif.html">GIF decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/gif.html#convert-gif-files-to-c-array">Convert GIF files to C array</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/gif.html#use-gif-images-from-file">Use GIF images from file</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/gif.html#memory-requirements">Memory requirements</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/gif.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/gif.html#open-a-gif-image-from-file-and-variable">Open a GIF image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/gif.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/freetype.html">FreeType support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#install-freetype">Install FreeType</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#add-freetype-to-your-project">Add FreeType to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/freetype.html#open-a-front-with-freetype">Open a front with FreeType</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#learn-more">Learn more</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/freetype.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/qrcode.html">QR code</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/qrcode.html#get-started">Get started</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/qrcode.html#notes">Notes</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/qrcode.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/qrcode.html#create-a-qr-code">Create a QR Code</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/qrcode.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/rlottie.html">Lottie player</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#build-rlottie">Build Rlottie</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/rlottie.html#use-rlottie-from-file">Use Rlottie from file</a></li>
<li class="toctree-l4"><a class="reference internal" href="libs/rlottie.html#use-rlottie-from-raw-string-data">Use Rlottie from raw string data</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#getting-animations">Getting animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#controlling-animations">Controlling animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/rlottie.html#load-a-lottie-animation-from-raw-data">Load a Lottie animation from raw data</a></li>
<li class="toctree-l4"><a class="reference internal" href="libs/rlottie.html#load-a-lottie-animation-from-a-file">Load a Lottie animation from a file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/rlottie.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="libs/ffmpeg.html">FFmpeg support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="libs/ffmpeg.html#install-ffmpeg">Install FFmpeg</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/ffmpeg.html#add-ffmpeg-to-your-project">Add FFmpeg to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/ffmpeg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="libs/ffmpeg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="libs/ffmpeg.html#decode-image">Decode image</a></li>
<li class="toctree-l4"><a class="reference internal" href="libs/ffmpeg.html#decode-video">Decode video</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="libs/ffmpeg.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="others/index.html">Others</a><ul>
<li class="toctree-l2"><a class="reference internal" href="others/snapshot.html">Snapshot</a><ul>
<li class="toctree-l3"><a class="reference internal" href="others/snapshot.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="others/snapshot.html#free-the-image">Free the Image</a></li>
<li class="toctree-l4"><a class="reference internal" href="others/snapshot.html#use-existing-buffer">Use Existing Buffer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="others/snapshot.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="others/snapshot.html#simple-snapshot-example">Simple snapshot example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="others/snapshot.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="others/monkey.html">Monkey</a><ul>
<li class="toctree-l3"><a class="reference internal" href="others/monkey.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="others/monkey.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="others/monkey.html#touchpad-monkey-example">Touchpad monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="others/monkey.html#encoder-monkey-example">Encoder monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="others/monkey.html#button-monkey-example">Button monkey example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="others/monkey.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="others/gridnav.html">Grid navigation</a><ul>
<li class="toctree-l3"><a class="reference internal" href="others/gridnav.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="others/gridnav.html#focusable-objects">Focusable objects</a></li>
<li class="toctree-l3"><a class="reference internal" href="others/gridnav.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="others/gridnav.html#basic-grid-navigation">Basic grid navigation</a></li>
<li class="toctree-l4"><a class="reference internal" href="others/gridnav.html#grid-navigation-on-a-list">Grid navigation on a list</a></li>
<li class="toctree-l4"><a class="reference internal" href="others/gridnav.html#nested-grid-navigations">Nested grid navigations</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="others/gridnav.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="#from-command-line">From command line</a></li>
<li class="toctree-l3"><a class="reference internal" href="#commit-message-format">Commit message format</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v8-1-0-10-november-2021">v8.1.0 10 November 2021</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#breaking-changes">Breaking Changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#architectural">Architectural</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-features">New Features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#performance">Performance</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#fixes">Fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#examples">Examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#docs">Docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#ci-and-tests">CI and tests</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#others">Others</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id1">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id2">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id3">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id5">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id6">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id8">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id9">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id12">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id13">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id15">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id16">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id17">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id18">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id19">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id20">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id22">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id23">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id24">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id25">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id26">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id27">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id30">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id31">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#id32">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="ROADMAP.html#v8-2">v8.2</a></li>
<li class="toctree-l2"><a class="reference internal" href="ROADMAP.html#ideas">Ideas</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="index.html" class="icon icon-home"></a> &raquo;</li>
        
      <li>Contributing</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/d851fe0528fcb920fee86c944fe9dbbaf6fbb0c9/docs/CONTRIBUTING.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="contributing">
<h1>Contributing<a class="headerlink" href="#contributing" title="Permalink to this headline">¶</a></h1>
<div class="section" id="introduction">
<h2>Introduction<a class="headerlink" href="#introduction" title="Permalink to this headline">¶</a></h2>
<p>Join LVGL's community and leave your footprint in the library!</p>
<p>There are a lot of ways to contribute to LVGL even if you are new to the library or even new to programming.</p>
<p>It might be scary to make the first step but you have nothing to be afraid of.
A friendly and helpful community is waiting for you. Get to know like-minded people and make something great together.</p>
<p>So let's find which contribution option fits you the best and help you join the development of LVGL!</p>
<p>Before getting started here are some guidelines to make contribution smoother:</p>
<ul class="simple">
<li><p>Be kind and friendly.</p></li>
<li><p>Be sure to read the relevant part of the documentation before posting a question.</p></li>
<li><p>Ask questions in the <a class="reference external" href="https://forum.lvgl.io/">Forum</a> and use <a class="reference external" href="https://github.com/lvgl/">GitHub</a> for development-related discussions.</p></li>
<li><p>Always fill out the post or issue templates in the Forum or GitHub (or at least provide equivalent information). It makes understanding your contribution or issue easier and you will get a useful response faster.</p></li>
<li><p>If possible send an absolute minimal but buildable code example in order to reproduce the issue. Be sure it contains all the required variable declarations, constants, and assets (images, fonts).</p></li>
<li><p>Use <a class="reference external" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown</a> to format your posts. You can learn it in 10 minutes.</p></li>
<li><p>Speak about one thing in one issue or topic. It makes your post easier to find later for someone with the same question.</p></li>
<li><p>Give feedback and close the issue or mark the topic as solved if your question is answered.</p></li>
<li><p>For non-trivial fixes and features, it's better to open an issue first to discuss the details instead of sending a pull request directly.</p></li>
<li><p>Please read and follow the <a href="https://github.com/lvgl/lvgl/blob/master/docs/CODING_STYLE.md">Coding style</a> guide.</p></li>
</ul>
</div>
<div class="section" id="pull-request">
<h2>Pull request<a class="headerlink" href="#pull-request" title="Permalink to this headline">¶</a></h2>
<p>Merging new code into the lvgl, documentation, blog, examples, and other repositories happen via <em>Pull requests</em> (PR for short).
A PR is a notification like &quot;Hey, I made some updates to your project. Here are the changes, you can add them if you want.&quot;
To do this you need a copy (called fork) of the original project under your account, make some changes there, and notify the original repository about your updates.
You can see what it looks like on GitHub for LVGL here: <a class="reference external" href="https://github.com/lvgl/lvgl/pulls">https://github.com/lvgl/lvgl/pulls</a>.</p>
<p>To add your changes you can edit files online on GitHub and send a new Pull request from there (recommended for small changes) or
add the updates in your favorite editor/IDE and use git to publish the changes (recommended for more complex updates).</p>
<div class="section" id="from-github">
<h3>From GitHub<a class="headerlink" href="#from-github" title="Permalink to this headline">¶</a></h3>
<ol class="simple">
<li><p>Navigate to the file you want to edit.</p></li>
<li><p>Click the Edit button in the top right-hand corner.</p></li>
<li><p>Add your changes to the file.</p></li>
<li><p>Add a commit message on the bottom of the page.</p></li>
<li><p>Click the <em>Propose changes</em> button.</p></li>
</ol>
</div>
<div class="section" id="from-command-line">
<h3>From command line<a class="headerlink" href="#from-command-line" title="Permalink to this headline">¶</a></h3>
<p>The instructions describe the main <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repository but it works the same way for the other repositories.</p>
<ol class="simple">
<li><p>Fork the <a class="reference external" href="https://github.com/lvgl/lvgl">lvgl repository</a>. To do this click the &quot;Fork&quot; button in the top right corner.
It will &quot;copy&quot; the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repository to your GitHub account (<code class="docutils literal notranslate"><span class="pre">https://github.com/&lt;YOUR_NAME&gt;?tab=repositories</span></code>)</p></li>
<li><p>Clone your forked repository.</p></li>
<li><p>Add your changes. You can create a <em>feature branch</em> from <em>master</em> for the updates: <code class="docutils literal notranslate"><span class="pre">git</span> <span class="pre">checkout</span> <span class="pre">-b</span> <span class="pre">the-new-feature</span></code></p></li>
<li><p>Commit and push your changes to the forked <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repository.</p></li>
<li><p>Create a PR on GitHub from the page of your <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repository (<code class="docutils literal notranslate"><span class="pre">https://github.com/&lt;YOUR_NAME&gt;/lvgl</span></code>) by clicking the <em>&quot;New pull request&quot;</em> button. Don't forget to select the branch where you added your changes.</p></li>
<li><p>Set the base branch. It means where you want to merge your update. In the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repo both the fixes and new features go to <code class="docutils literal notranslate"><span class="pre">master</span></code> branch.</p></li>
<li><p>Describe what is in the update. An example code is welcome if applicable.</p></li>
<li><p>If you need to make more changes, just update your forked <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repo with new commits. They will automatically appear in the PR.</p></li>
</ol>
</div>
<div class="section" id="commit-message-format">
<h3>Commit message format<a class="headerlink" href="#commit-message-format" title="Permalink to this headline">¶</a></h3>
<p>The commit messages format is inspired by <a class="reference external" href="https://gist.github.com/brianclements/841ea7bffdb01346392c">Angular Commit Format</a>.</p>
<p>The following structure should be used:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">type</span><span class="o">&gt;</span><span class="p">(</span><span class="o">&lt;</span><span class="n">scope</span><span class="o">&gt;</span><span class="p">)</span><span class="o">:</span> <span class="o">&lt;</span><span class="n">subject</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">BLANK</span> <span class="n">LINE</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">body</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">BLANK</span> <span class="n">LINE</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">footer</span><span class="o">&gt;</span>
</pre></div>
</div>
<p>Possible <code class="docutils literal notranslate"><span class="pre">&lt;type&gt;</span></code>s:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">fix</span></code> bugfix in the source code.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">feat</span></code> new feature</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">arch</span></code> architectural changes</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">perf</span></code> changes that affect the performance</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">example</span></code> anything related to examples (even fixes and new examples)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">docs</span></code> anything related to the documentation (even fixes, formatting, and new pages)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">test</span></code> anything related to tests (new and updated tests or CI actions)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">chore</span></code> any minor formatting or style changes that would make the changelog noisy</p></li>
</ul>
<p><code class="docutils literal notranslate"><span class="pre">&lt;scope&gt;</span></code> is the module, file, or sub-system that is affected by the commit. It's usually one word and can be chosen freely.
For example <code class="docutils literal notranslate"><span class="pre">img</span></code>, <code class="docutils literal notranslate"><span class="pre">layout</span></code>, <code class="docutils literal notranslate"><span class="pre">txt</span></code>, <code class="docutils literal notranslate"><span class="pre">anim</span></code>. The scope can be omitted.</p>
<p><code class="docutils literal notranslate"><span class="pre">&lt;subject&gt;</span></code> contains a short description of the change:</p>
<ul class="simple">
<li><p>use the imperative, present tense: &quot;change&quot; not &quot;changed&quot; nor &quot;changes&quot;</p></li>
<li><p>don't capitalize the first letter</p></li>
<li><p>no dot (.) at the end</p></li>
<li><p>max 90 characters</p></li>
</ul>
<p><code class="docutils literal notranslate"><span class="pre">&lt;body&gt;</span></code> optional and can be used to describe the details of this change.</p>
<p><code class="docutils literal notranslate"><span class="pre">&lt;footer&gt;</span></code> shall contain</p>
<ul class="simple">
<li><p>the words &quot;BREAKING CHANGE&quot; if the changes break the API</p></li>
<li><p>reference to the GitHub issue or Pull Request if applicable.</p></li>
</ul>
<p>Some examples:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">fix</span><span class="p">(</span><span class="n">img</span><span class="p">)</span><span class="o">:</span> <span class="n">update</span> <span class="n">size</span> <span class="k">if</span> <span class="n">a</span> <span class="n">new</span> <span class="n">source</span> <span class="n">is</span> <span class="n">set</span>
</pre></div>
</div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span>fix(bar): fix memory leak

The animations weren&#39;t deleted in the destructor.

Fixes: #1234
</pre></div>
</div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span>feat: add span widget

The span widget allows mixing different font sizes, colors and styles.
It&#39;s similar to HTML &lt;span&gt;
</pre></div>
</div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">docs</span><span class="p">(</span><span class="n">porting</span><span class="p">)</span><span class="o">:</span> <span class="n">fix</span> <span class="n">typo</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="developer-certification-of-origin-dco">
<h2>Developer Certification of Origin (DCO)<a class="headerlink" href="#developer-certification-of-origin-dco" title="Permalink to this headline">¶</a></h2>
<div class="section" id="overview">
<h3>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h3>
<p>To ensure all licensing criteria are met for every repository of the LVGL project, we apply a process called DCO (Developer's Certificate of Origin).</p>
<p>The text of DCO can be read here: <a class="reference external" href="https://developercertificate.org/">https://developercertificate.org/</a>.</p>
<p>By contributing to any repositories of the LVGL project you agree that your contribution complies with the DCO.</p>
<p>If your contribution fulfills the requirements of the DCO no further action is needed. If you are unsure feel free to ask us in a comment.</p>
</div>
<div class="section" id="accepted-licenses-and-copyright-notices">
<h3>Accepted licenses and copyright notices<a class="headerlink" href="#accepted-licenses-and-copyright-notices" title="Permalink to this headline">¶</a></h3>
<p>To make the DCO easier to digest, here are some practical guides about specific cases:</p>
<div class="section" id="your-own-work">
<h4>Your own work<a class="headerlink" href="#your-own-work" title="Permalink to this headline">¶</a></h4>
<p>The simplest case is when the contribution is solely your own work.
In this case you can just send a Pull Request without worrying about any licensing issues.</p>
</div>
<div class="section" id="use-code-from-online-source">
<h4>Use code from online source<a class="headerlink" href="#use-code-from-online-source" title="Permalink to this headline">¶</a></h4>
<p>If the code you would like to add is based on an article, post or comment on a website (e.g. StackOverflow) the license and/or rules of that site should be followed.</p>
<p>For example in case of StackOverflow a notice like this can be used:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cm">/* The original version of this code-snippet was published on StackOverflow.</span>
<span class="cm"> * Post: http://stackoverflow.com/questions/12345</span>
<span class="cm"> * Author: http://stackoverflow.com/users/12345/username</span>
<span class="cm"> * The following parts of the snippet were changed:</span>
<span class="cm"> * - Check this or that</span>
<span class="cm"> * - Optimize performance here and there</span>
<span class="cm"> */</span>
 <span class="p">...</span> <span class="n">code</span> <span class="n">snippet</span> <span class="n">here</span> <span class="p">...</span>
</pre></div>
</div>
</div>
<div class="section" id="use-mit-licensed-code">
<h4>Use MIT licensed code<a class="headerlink" href="#use-mit-licensed-code" title="Permalink to this headline">¶</a></h4>
<p>As LVGL is MIT licensed, other MIT licensed code can be integrated without issues.
The MIT license requires a copyright notice be added to the derived work. Any derivative work based on MIT licensed code must copy the original work's license file or text.</p>
</div>
<div class="section" id="use-gpl-licensed-code">
<h4>Use GPL licensed code<a class="headerlink" href="#use-gpl-licensed-code" title="Permalink to this headline">¶</a></h4>
<p>The GPL license is not compatible with the MIT license. Therefore, LVGL can not accept GPL licensed code.</p>
</div>
</div>
</div>
<div class="section" id="ways-to-contribute">
<h2>Ways to contribute<a class="headerlink" href="#ways-to-contribute" title="Permalink to this headline">¶</a></h2>
<p>Even if you're just getting started with LVGL there are plenty of ways to get your feet wet.
Most of these options don't even require knowing a single line of LVGL code.</p>
<p>Below we have collected some opportunities about the ways you can contribute to LVGL.</p>
<div class="section" id="give-lvgl-a-star">
<h3>Give LVGL a Star<a class="headerlink" href="#give-lvgl-a-star" title="Permalink to this headline">¶</a></h3>
<p>Show that you like LVGL by giving it star on GitHub!</p>
<!-- Place this tag in your head or just before your close body tag. --><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Place this tag where you want the button to render. --><p><a class="github-button" href="https://github.com/lvgl/lvgl" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lvgl/lvgl on GitHub">Star</a></p>
<p>This simple click makes LVGL more visible on GitHub and makes it more attractive to other people.
So with this, you already helped a lot!</p>
</div>
<div class="section" id="tell-what-you-have-achieved">
<h3>Tell what you have achieved<a class="headerlink" href="#tell-what-you-have-achieved" title="Permalink to this headline">¶</a></h3>
<p>Have you already started using LVGL in a <a class="reference internal" href="get-started/pc-simulator.html"><span class="doc">Simulator</span></a>, a development board, or on your custom hardware?
Was it easy or were there some obstacles? Are you happy with the result?
Showing your project to others is a win-win situation because it increases your and LVGL's reputation at the same time.</p>
<p>You can post about your project on Twitter, Facebook, LinkedIn, create a YouTube video, and so on.
Only one thing: On social media don't forget to add a link to <code class="docutils literal notranslate"><span class="pre">https://lvgl.io</span></code> or <code class="docutils literal notranslate"><span class="pre">https://github.com/lvgl</span></code> and use the hashtag <code class="docutils literal notranslate"><span class="pre">#lvgl</span></code>. Thank you! :)</p>
<p>You can also open a new topic in the <a class="reference external" href="https://forum.lvgl.io/c/my-projects/10">My projects</a> category of the Forum.</p>
<p>The <a class="reference external" href="https://blog.lvgl.io">LVGL Blog</a> welcomes posts from anyone.
It's a good place to talk about a project you created with LVGL, write a tutorial, or share some nice tricks.
The latest blog posts are shown on the <a class="reference external" href="https://lvgl.io">homepage of LVGL</a> to make your work more visible.</p>
<p>The blog is hosted on GitHub. If you add a post GitHub automatically turns it into a website.
See the <a class="reference external" href="https://github.com/lvgl/blog">README</a> of the blog repo to see how to add your post.</p>
<p>Any of these help to spread the word and familiarize new developers with LVGL.</p>
<p>If you don't want to speak about your project publicly, feel free to use <a class="reference external" href="https://lvgl.io/#contact">Contact form</a> on lvgl.io to private message to us.</p>
</div>
<div class="section" id="write-examples">
<h3>Write examples<a class="headerlink" href="#write-examples" title="Permalink to this headline">¶</a></h3>
<p>As you learn LVGL you will probably play with the features of widgets. Why not publish your experiments?</p>
<p>Each widgets' documentation contains examples. For instance, here are the examples of the <a class="reference external" href="/widgets/core/dropdown#examples">Drop-down list</a> widget.
The examples are directly loaded from the <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/examples">lvgl/examples</a> folder.</p>
<p>So all you need to do is send a <a class="reference external" href="#pull-request">Pull request</a> to the <a class="reference external" href="https://github.com/lvgl/lvgl">lvgl</a> repository and follow some conventions:</p>
<ul class="simple">
<li><p>Name the examples like <code class="docutils literal notranslate"><span class="pre">lv_example_&lt;widget_name&gt;_&lt;index&gt;</span></code>.</p></li>
<li><p>Make the example as short and simple as possible.</p></li>
<li><p>Add comments to explain what the example does.</p></li>
<li><p>Use 320x240 resolution.</p></li>
<li><p>Update <code class="docutils literal notranslate"><span class="pre">index.rst</span></code> in the example's folder with your new example. To see how other examples are added, look in the <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/examples/widgets">lvgl/examples/widgets</a> folder.</p></li>
</ul>
</div>
<div class="section" id="improve-the-docs">
<h3>Improve the docs<a class="headerlink" href="#improve-the-docs" title="Permalink to this headline">¶</a></h3>
<p>As you read the documentation you might see some typos or unclear sentences. All the documentation is located in the <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/docs">lvgl/docs</a> folder.
For typos and straightforward fixes, you can simply edit the file on GitHub.</p>
<p>Note that the documentation is also formatted in <a class="reference external" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown</a>.</p>
</div>
<div class="section" id="report-bugs">
<h3>Report bugs<a class="headerlink" href="#report-bugs" title="Permalink to this headline">¶</a></h3>
<p>As you use LVGL you might find bugs. Before reporting them be sure to check the relevant parts of the documentation.</p>
<p>If it really seems like a bug feel free to open an <a class="reference external" href="https://github.com/lvgl/lvgl/issues">issue on GitHub</a>.</p>
<p>When filing the issue be sure to fill out the template. It helps find the root of the problem while avoiding extensive questions and exchanges with other developers.</p>
</div>
<div class="section" id="send-fixes">
<h3>Send fixes<a class="headerlink" href="#send-fixes" title="Permalink to this headline">¶</a></h3>
<p>The beauty of open-source software is you can easily dig in to it to understand how it works. You can also fix or adjust it as you wish.</p>
<p>If you found and fixed a bug don't hesitate to send a <a class="reference external" href="#pull-request">Pull request</a> with the fix.</p>
<p>In your Pull request please also add a line to <a class="reference external" href="https://github.com/lvgl/lvgl/blob/master/CHANGELOG"><code class="docutils literal notranslate"><span class="pre">CHANGELOG.md</span></code></a>.</p>
</div>
<div class="section" id="join-the-conversations-in-the-forum">
<h3>Join the conversations in the Forum<a class="headerlink" href="#join-the-conversations-in-the-forum" title="Permalink to this headline">¶</a></h3>
<p>It feels great to know you are not alone if something is not working. It's even better to help others when they struggle with something.</p>
<p>While you were learning LVGL you might have had questions and used the Forum to get answers. As a result, you probably have more knowledge about how LVGL works.</p>
<p>One of the best ways to give back is to use the Forum and answer the questions of newcomers - like you were once.</p>
<p>Just read the titles and if you are familiar with the topic don't hesitate to share your thoughts and suggestions.</p>
<p>Participating in the discussions is one of the best ways to become part of the project and get to know like-minded people!</p>
</div>
<div class="section" id="add-features">
<h3>Add features<a class="headerlink" href="#add-features" title="Permalink to this headline">¶</a></h3>
<p>If you have created a cool widget, or added useful feature to LVGL feel free to open a new PR for it.
We collect the optional features (a.k.a. plugins) in <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/src/extra">lvgl/src/extra</a> folder so if you are interested in adding a new features please use this folder.
The <a class="reference external" href="https://github.com/lvgl/lvgl/blob/master/src/extra/README">README</a> file describes the basics rules of contribution and also lists some ideas.</p>
<p>For further ideas take a look at the <a class="reference internal" href="ROADMAP.html"><span class="doc">Roadmap</span></a> page. If you are interested in any of them feel free to share your opinion and/or participate in the implementation.</p>
<p>Other features which are (still) not on the road map are listed in the <a class="reference external" href="https://forum.lvgl.io/c/feature-request/9">Feature request</a> category of the Forum.</p>
<p>When adding a new features the followings also needs to be updated:</p>
<ul class="simple">
<li><p>Update <a class="reference external" href="https://github.com/lvgl/lvgl/blob/master/lv_conf_template.h">lv_conf_template.h</a></p></li>
<li><p>Add description in the <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/docs">docs</a></p></li>
<li><p>Add <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/examples">examples</a></p></li>
<li><p>Update the <a class="reference external" href="https://github.com/lvgl/lvgl/tree/master/docs/CHANGELOG">changelog</a></p></li>
</ul>
</div>
<div class="section" id="become-a-maintainer">
<h3>Become a maintainer<a class="headerlink" href="#become-a-maintainer" title="Permalink to this headline">¶</a></h3>
<p>If you want to become part of the core development team, you can become a maintainer of a repository.</p>
<p>By becoming a maintainer:</p>
<ul class="simple">
<li><p>You get write access to that repo:</p>
<ul>
<li><p>Add code directly without sending a pull request</p></li>
<li><p>Accept pull requests</p></li>
<li><p>Close/reopen/edit issues</p></li>
</ul>
</li>
<li><p>Your input has higher impact when we are making decisions</p></li>
</ul>
<p>You can become a maintainer by invitation, however the following conditions need to met</p>
<ol class="simple">
<li><p>Have &gt; 50 replies in the Forum. You can look at your stats <a class="reference external" href="https://forum.lvgl.io/u?period=all">here</a></p></li>
<li><p>Send &gt; 5 non-trivial pull requests to the repo where you would like to be a maintainer</p></li>
</ol>
<p>If you are interested, just send a message (e.g. from the Forum) to the current maintainers of the repository. They will check if the prerequisites are met.
Note that meeting the prerequisites is not a guarantee of acceptance, i.e. if the conditions are met you won't automatically become a maintainer.
It's up to the current maintainers to make the decision.</p>
</div>
<div class="section" id="move-your-project-repository-under-lvgl-organization">
<h3>Move your project repository under LVGL organization<a class="headerlink" href="#move-your-project-repository-under-lvgl-organization" title="Permalink to this headline">¶</a></h3>
<p>Besides the core <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> repository there are other repos for ports to development boards, IDEs or other environment.
If you ported LVGL to a new platform we can host it under the LVGL organization among the other repos.</p>
<p>This way your project will become part of the whole LVGL project and can get more visibility.
If you are interested in this opportunity just open an <a class="reference external" href="https://github.com/lvgl/lvgl/issues">issue in lvgl repo</a> and tell what you have!</p>
<p>If we agree that your port fit well into the LVGL organization, we will open a repository for your project where you will have admin rights.</p>
<p>To make this concept sustainable there a few rules to follow:</p>
<ul class="simple">
<li><p>You need to add a README to your repo.</p></li>
<li><p>We expect to maintain the repo to some extent:</p>
<ul>
<li><p>Follow at least the major versions of LVGL</p></li>
<li><p>Respond to the issues (in a reasonable time)</p></li>
</ul>
</li>
<li><p>If there is no activity in a repo for 1 year it will be archived</p></li>
</ul>
</div>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="CHANGELOG.html" class="btn btn-neutral float-right" title="Changelog" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="others/gridnav.html" class="btn btn-neutral float-left" title="Grid navigation" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2021, LVGL Kft.
      <span class="lastupdated">
        Last updated on Jan 31, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                let versionName = "";  
                if(version == "master") versionName = "master (latest)";
                else versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
document.addEventListener('DOMContentLoaded', (event) => {
    function onIntersection(entries) {
        entries.forEach(entry => {
            let currentlyLoaded = entry.target.getAttribute("data-is-loaded") == "true";
            let shouldBeLoaded = entry.intersectionRatio > 0;
            if(currentlyLoaded != shouldBeLoaded) {
                entry.target.setAttribute("data-is-loaded", shouldBeLoaded);
                if(shouldBeLoaded) {
                    let iframe = document.createElement("iframe");
                    iframe.src = entry.target.getAttribute("data-real-src");
                    entry.target.appendChild(iframe);
                } else {
                    let iframe = entry.target.querySelector("iframe");
                    iframe.parentNode.removeChild(iframe);
                }
            }
        });
    }
    const config = {
        rootMargin: '600px 0px',
        threshold: 0.01
    };
    let observer = new IntersectionObserver(onIntersection, config);
    document.querySelectorAll(".lv-example").forEach(iframe => {
        observer.observe(iframe);
    });
});
</script>


</body>
</html>